
<template>
    <div>
        <Row type="flex" justify="space-between" style="margin-bottom: 10px">
            <div >
                <span>考勤月份</span>
                <Select v-model="year" style="width: 75px" placeholder="年">
                    <Option v-for="item in years" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <Select v-model="month"  style="width: 60px" placeholder="月" @on-change="resetData">
                    <Option v-for="item in months" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </div>
            <div style="display: none;">
                <Button icon="ios-upload-outline">导出</Button>
                <Button icon="ios-close-empty">后退</Button>
            </div>
        </Row>
        <Row type="flex" justify="space-between">
            <div>姓名：{{this.userName}}</div>
            <div style="display: none;">
                <span>正常：9天  </span>
                <span>迟到：2次  </span>
                <span>早退：1次  </span>
                <span>漏打卡：1次  </span>
                <span>缺勤：2天  </span>
            </div>
        </Row>
        <Calendar ref="calendar" v-bind:year="year" v-bind:month="month" v-bind:isMondayFirst="false" v-on:loadData="loadData"></Calendar>
    </div>
</template>
<script>

    import Calendar from "./Calendar.vue"
    import Ajax from "../../../libs/ajax";
    import DateUtils from "../../../../node_modules/iview/src/utils/date"

    export default {
        components:{
            Calendar
        },
        data() {
            return {
                year:"",
                month:"",
                userId:"",
                userName:"",
                years:[
                    {
                        value: '2015',
                        label: '2015年'
                    },
                    {
                        value: '2016',
                        label: '2016年'
                    },
                    {
                        value: '2017',
                        label: '2017年'
                    }
                ],
                months:[
                    {
                        value: '1',
                        label: '1月'
                    },
                    {
                        value: '2',
                        label: '2月'
                    },
                    {
                        value: '3',
                        label: '3月'
                    },
                    {
                        value: '4',
                        label: '4月'
                    },
                    {
                        value: '5',
                        label: '5月'
                    },
                    {
                        value: '6',
                        label: '6月'
                    },
                    {
                        value: '7',
                        label: '7月'
                    },
                    {
                        value: '8',
                        label: '8月'
                    },
                    {
                        value: '9',
                        label: '9月'
                    },
                    {
                        value: '10',
                        label: '10月'
                    },
                    {
                        value: '11',
                        label: '11月'
                    },
                    {
                        value: '12',
                        label: '12月'
                    },
                ],
            }
        },
        created() {
            this.initYears()
            this.init();
        },
        methods: {
            init(){
                let query =  this.$route.query
                this.year = query.year
                this.month = query.month
                this.userId = query.userId
                this.userName = query.userName
            },
            //实现加载数据的方法
            initYears(){
                let currentYear = Number(DateUtils.format(new Date(),'yyyy'))
                console.log('currentyear is ' + currentYear)
                this.years= []
                let temp = currentYear - 2;

                for(;temp <= currentYear;++temp){
                    this.years.push({
                        value:temp+'',
                        label:temp + '年'
                    })
                }
            },
            loadData(){
                let dataStr=""
                if(this.month.length < 2){
                    dataStr = this.year + "0" + this.month
                }else{
                    dataStr = this.year + this.month
                }
                Ajax.ajax({
                    url: `/api/attendance/query_detail?user_id=${this.userId}&ad_month=${dataStr}`,
                    method: "get"
                }).then(res =>{
                    let json = res.data.data
                    window.json = json
                    this.$refs['calendar'].fillCalendar(json)
                })
            },
            resetData(){
                this.$refs['calendar'].resetData(this.year,this.month)
            }
        },


    }



</script>